<template>
	<view class="page">
		<view class="my-top">
			<!-- head -->
			<view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
				<view class="portrait">
					<image v-show="scrollTop>20" src="//img11.360buyimg.com/jdphoto/s40x40_jfs/t1/25255/18/10701/1678/5c89f892E78c04688/684d63c0d68e39b1.png"></image>
				</view>
				
				<view class="setting-mess">
					<view class="setting" @click="onSetting">
						<text class="iconfont icon-setting" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
					<view class="mess" @click="onMessage">
						<text class="iconfont icon-xiaoxi" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="user-info" v-if="user.userId!=null">
				<view class="portrait" @click="onSetting">
					<image :src="user.avatar" ></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{user.userName===""?"暂未设置":user.userName}}</text>
					</view>
					
				</view>
			</view>
		  <view class="user-info" v-else @click="onUserInfo" >
			  <view class="portrait">
			  	<image src="https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180" ></image>
			  </view>
			<view class="info" >
			  <view class="nickname">
				<text>登录/注册</text>
			  </view>
			</view>
		  </view>
			<!-- 关注区 -->
			<view class="focus-area">
				<view class="list" @click="onCollect('goods')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>商品关注</text>
					</view>
				</view>
				<view class="list" @click="onCollect('content')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>喜欢的内容</text>
					</view>
				</view>
				<view class="list" @click="onCollect('record')">
					<view class="num">
						<text>28</text>
					</view>
					<view class="title">
						<text>浏览记录</text>
					</view>
				</view>
			</view>
			<!-- 会员 -->
			<view class="vip-info" @click="onMmeberVip">
				<view class="vip">
					<text>超级会员</text>
					<text class="line"></text>
				</view>
				<view class="vip-explain">
					<text>超级会员一年预计可省99元</text>
				</view>
				<view class="vip-btn">
					<text>立即查看</text>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="list" @click="onSkipOrder(1)">
				<view class="icon">
					<text class="iconfont icon-daifukuan"></text>
					<!-- <text class="num"></text> -->
				</view>
				<view class="title">
					<text>待付款</text>
				</view>
			</view>
			<view class="list" @click="onSkipOrder(2)">
				<view class="icon">
					<text class="iconfont icon-daifahuo"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待发货</text>
				</view>
			</view>
			<view class="list" @click="onSkipOrder(3)">
				<view class="icon">
					<text class="iconfont icon-daishouhuo"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待收货</text>
				</view>
			</view>
			<view class="list" @click="onSkipOrder(4)">
				<view class="icon">
					<text class="iconfont icon-daipingjia"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>待评价</text>
				</view>
			</view>
			<view class="list" @click="onSkipOrder(0)">
				<view class="icon">
					<text class="iconfont icon-tuikuan"></text>
					<!-- <text class="num">22</text> -->
				</view>
				<view class="title">
					<text>退换</text>
				</view>
			</view>
		</view>
		<!-- 钱包 -->
		<view class="wallet-info" @click="toWallet()">
			<view class="list" >
				<view class="icon">
					<text class="number">{{walletData.credit}}</text>
				</view>
				<view class="title">
					<text>积分</text>
				</view>
			</view>
			<view class="list" >
				<view class="icon">
					<text class="number">0</text>
				</view>
				<view class="title">
					<text>优惠券</text>
				</view>
			</view>
			<view class="list">
				<view class="icon">
					<text class="number">{{walletData.balance}}</text>
				</view>
				<view class="title">
					<text>余额</text>
				</view>
			</view>
			<view class="list">
				<view class="icon">
					<text class="iconfont icon-qianbao"></text>
				</view>
				<view class="title">
					<text class="action">我的钱包</text>
				</view>
			</view>
		</view>
		<!-- 积分，付款码 -->
		<view class="integral-payment">
			<view class="list" @click="onWallet('SignIn')">
				<view class="title">
					<text class="iconfont icon-qiandao" style="font-weight: bold;"></text>
					<text>签到</text>
				</view>
				<view class="mess">
					<text>每日签到 领取积分</text>
				</view>
			</view>
			<view class="list" @click="onWallet('payment')">
				<view class="title">
					<text class="iconfont icon-fukuanma"></text>
					<text>付款码</text>
				</view>
				<view class="mess">
					<text>到店扫码 快捷支付</text>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="my-service">
			<view class="title">
				<text>我的服务</text>
			</view>
			<view class="service-list">
				<view class="list" @click="onServer('feedback')">
					<view class="thumb">
						<image src="/static/yjfk.png"></image>
					</view>
					<view class="name">
						<text>意见反馈</text>
					</view>
				</view>
				<view class="list" @click="onServer('serve')">
					<view class="thumb">
						<image src="/static/kfrx.png"></image>
					</view>
					<view class="name">
						<text>客服热线</text>
					</view>
				</view>
			</view>
		</view>
    <!-- 为你推荐 -->
    <view class="recommend-info">
		<view class="recommend-title">
		  <view class="title">
		    <image src="/static/wntj_title.png" mode=""></image>
		  </view>
		</view>
      <goods-list :list_data="goodsData" @listTap="goodsListTap" />
      
    </view>
		<!-- 客服热线 -->
		<view class="serve-hotline" @click="isHotline = false">
			<view class="cu-modal bottom-modal" :class="{'show':isHotline}">
			  <view class="cu-dialog">
					<view class="contact-list">
						<view class="list">
							<text>呼叫客服</text>
						</view>
						<view class="list">
							<text style="color: #959595;">400-800-900</text>
						</view>
						<view class="list">
							<text>取消</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import _home_data from '@/static/zaiui/data/home.js';
import goodsList from '@/components/list/product-list.vue';
	export default {
		
		components:{goodsList},
		computed: {
		   blankShow(){
		   		return this.goodsData.length===0;
		   	},
		   	hasNext(){
		   		return this.pageMax>this.query.current
		   	}
		},
		data() {
			return {
				goodsData:[],
				scrollTop: 0,
				isHotline: false,
				user:{},
				query:{
					current:1,
					size:4
				},
				walletData:{
					balance:'未登录',
					credit:'未登录'
				},
				pageMax:1,
				current: 0,
				//ocmUser:this.$store.getters.getOcmUser,
				
        
			}
		},
		
		onReady() {
			
		},
		created(){
			let GoodsData = _home_data.goodsList();

			let recommendData = _home_data.recommend();
			this.onSearch()
			this.goodsData.splice(1,1, recommendData);
			
		},
		onShow() {
			this.user=uni.getStorageSync("user")
			if(this.user.userId!=undefined)
				this.$u.api.getWallet().then(res=>{
					this.walletData=res
				})
			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			goodsListTap(index,data){
				this.$u.route({
					url:'/pages/productDetail/productDetail?spuId='+data.spuId+"&shopId="+data.shopId,
					
				})	
			},
			onSearch(isNew=false){
				this.query.current=1
				this.$u.api.searchProduct(this.query).then(res=>{
					this.goodsData=res.records[0].spuESList
					this.pageMax=res.pages
					
				})
			},
			nextPage(){
				if(this.hasNext){
					this.query.current+=1
					this.$u.api.searchProduct(this.query).then(res=>{
						this.goodsData=this.goodsData.concat(res.records[0].spuESList)
					})
				}
			},
			/**
			 * 关注跳转
			 */
			onCollect(type){
				switch (type){
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsOn/GoodsOn'
						})
						break;
					case 'content':
						uni.navigateTo({
							url: '/pages/ContentCollection/ContentCollection'
						})
						break;
					case 'record':
						uni.navigateTo({
							url: '/pages/BrowsingHistory/BrowsingHistory'
						})
						break;
				}
			},
			toWallet(){
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},
			goodsListTap(){
				
			},
			/**
			 * 订单
			 */
			onSkipOrder(type){
				if(type === 5){
					uni.navigateTo({
						url: '/pages/AfterSalesOrder/AfterSalesOrder',
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/order/list?type=' + type,
				})
			},
			/**
			 * 钱包跳转点击
			 */
			onWallet(type){
				switch (type){
					case 'integral':
						uni.navigateTo({
							url: '/pages/IntegralDetails/IntegralDetails',
						})
						break;
					case 'coupon':
						uni.navigateTo({
							url: '/pages/MyCoupon/MyCoupon',
						})
						break;
					case 'wallet':
						uni.navigateTo({
							url: '/pages/MyWallet/MyWallet',
						})
						break;
					case 'SignIn':
						uni.navigateTo({
							url: '/pages/SignIn/SignIn',
						})
						break;
					case 'payment':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode',
						})
						break;
				}
			},
			/**
			 * 我的服务点击
			 */
			onServer(type){
				switch (type){
					case 'feedback':
						uni.navigateTo({
							url: '/pages/Feedback/Feedback'
						})
						break;
					case 'serve':
						this.isHotline = true;
						break;
				}
			},
			/**
			 * 设置点击
			 */
			onSetting(){
				uni.navigateTo({
					url: '/pages/set/set'
				})
			},
			/**
			 * 消息点击
			 */
			onMessage(){
				uni.navigateTo({
					url: '/pages/Message/Message'
				})
			},
			/**
			 * 会员点击
			 */
			onMmeberVip(){
				uni.navigateTo({
					url: '/pages/MembersOpened/MembersOpened',
				})
			},
      /**
       * 跳转点击
       * @param {String} type 跳转类型
       */
      onSkip(type){
        switch (type){
          case 'goods':
            uni.navigateTo({
              url: '/pages/GoodsDetails/GoodsDetails',
              animationType: 'zoom-fade-out',
              animationDuration: 200
            })
            break;
        }
      },
      /**
       * 用户信息点击
       * @param {Number} type
       */
      onUserInfo(){
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
	},
	onReachBottom: function() {
		if(this.hasNext){
			
			this.query.current+=1
			this.$u.api.searchProduct(this.query).then(res=>{
				this.goodsData=this.goodsData.concat(res.records[0].spuESList)
				
			})
		}
	}
}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>
